{{ define "main" }}

{{ partial "page-title.html" . }}

<!-- portfolio -->
<section class="section">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12">
        <div class="btn-group btn-group-toggle justify-content-center d-flex flex-wrap" data-toggle="buttons">
          <label class="btn btn-sm btn-primary active">
            <input type="radio" name="shuffle-filter" value="all" checked="checked" />All
          </label>
					{{ $categories := slice }}
					{{ range .Data.Pages }}
					{{ range .Params.categories }}
					{{ $categories = $categories | append . }}
					{{ end }}
					{{ end }}
					{{ range ( $categories | uniq ) }}
          <label class="btn btn-sm btn-primary">
            <input type="radio" name="shuffle-filter" value="{{ . | urlize }}" />{{ . | humanize }}
          </label>
          {{ end }}
        </div>
      </div>
    </div>
    <div class="row shuffle-wrapper">
      {{ range .Data.Pages }}
      <div class="col-lg-4 col-6 mb-4 shuffle-item" data-groups="[{{range $index, $element:= .Params.categories }}{{if ne $index 0}},{{end}}&quot;{{. | urlize}}&quot;{{ end }}]">
        <div class="position-relative rounded hover-wrapper">
          <img src="{{.Params.image | absURL }}" alt="portfolio-image" class="img-fluid rounded w-100 d-block">
          <div class="hover-overlay">
            <div class="hover-content">
              <a class="btn btn-light btn-sm" href="{{ .Permalink }}">view project</a>
            </div>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
<!-- /portfolio -->

<section class="section bg-light">
  <div class="container">
    {{ partial "client-slider.html" . }}
  </div>
</section>

{{ end }}